<template>
	<view class="gameDetail">
		<view class="nav_bar">
			<uni-nav-bar statusBar fixed :border="false" @clickLeft="back">
				<block slot="left">
					<view class="back_btn">
						<uni-icons type="back" color="#fff" size="20"></uni-icons>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<view class="detail_t">
			<view class="banner">
				<swiper class="swiper" circular :indicator-dots="false" autoplay :interval="3000" :duration="500"
					@change="swiperChange">
					<block v-for="item in list" :key="item">
						<swiper-item>
							<view class="swiper-item">
								<image :src="item" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="custom-dots">{{currentSwiper}}/{{list.length}}</view>
			</view>
			<view class="game_info">
				<view class="game_base_info">
					<view class="info_1">
						<view class="game_title">{{ detail.storeName || '' }}</view>
						<view class="price">
							<text>￥</text>
							<text class="price_val">{{ detail.price || 0 }}</text>
						</view>
					</view>
					<view class="info_2">
						<!-- <view class="item-mr60">库存：100</view> -->
						<view class="item-mr60">销量：{{ detail.sales || 0 }}</view>
						
					</view>
					<view class="info_3">
						<text>地址：{{ detail.address || '暂未更新位置'}}</text>
						<uni-icons type="location-filled" color="#999999" size="16"></uni-icons>
					</view>
					<view class="share-btn flex a-c " @click="openShare">
						<image src="/static/mine/fenxiang.png" mode="widthFix" class="share-icon" />
						<view class="">分享</view>
					</view>
				</view>
			</view>
		</view>
		<view class="game_other_info" v-if="detail && detail.activity===0">
			<view class="tabs">
				<block v-for="item in tabs" :key="item.val">
					<view class="tab_item" @tap="clickTabs(item)">
						<view class="item.name" :class="{'active_name':currentTabs==item.val}">{{item.name}}</view>
						<image src="../static/b.png" mode="" :class="{'active_line':currentTabs==item.val}"></image>
					</view>
				</block>
			</view>
			<view class="game_desc" v-if="currentTabs==1">
				<view class="introduction">
					<rich-text :nodes="strings"></rich-text>
				</view>
				
			</view>
			<!-- 参赛人员 -->
			<view class="participants" v-else>
				<block v-for="(v,i) in contestants" :key="i">
					<view class="item">
						<image :src="v.avatar" mode=""></image>
						<view class="participant_name">{{ v.userName }}</view>
						<view class="count">{{ v.people }}人</view>
					</view>
				</block>
				<block v-if="!contestants || !contestants.length">
					<view class="noMore">暂无参赛人员</view>
				</block>
			</view>
		</view>
		<view class="detail_introduction" v-else>
			<view class="tabs" v-if="type == 6">
				<block v-for="(item,i) in tabs" :key="i">
					<view class="tab_item" @tap="clickTabs(item)">
						<view class="item.name" :class="{'active_name':currentTabs==item.val}">{{item.name}}</view>
						<image src="../static/b.png" mode="" :class="{'active_line':currentTabs==item.val}"></image>
					</view>
				</block>
			</view>
			<view class="title" v-else>产品介绍</view>
			<view class="introduction" v-if="currentTabs==1">
				<rich-text :nodes="strings"></rich-text>
			</view>
		</view>
		<view class="buy_btn" v-if="currentTabs == 1">
			<view class="flex a-c">
				<button class="fz-24 column a-c" @click="$to('/pages/tab/index')">
					<image src="../static/home.png" mode="heightFix" class="icon-40" />
					<view class="">首页</view>
				</button>
				<button class="fz-24 column a-c" open-type="contact">
					<image src="../static/kef.png" mode="heightFix" class="icon-40" />
					<view class="">咨询</view>
				</button>
				<view class="btn" :class="{'disable_joinGray':activeType!=1}" @tap="open('popup')">立即报名</view>
			</view>
		</view>
		<view class="comment_list" v-if="currentTabs==1&& type !=6">
			<view class="comment_title">产品评论</view>
			<block v-for="(v,i) in commentList" :key="i">
				<view class="comment_item">
					<view class="item_head">
						<view class="user_info">
							<image :src="v.avatar" mode=""></image>
							<view class="">
								<view class="user_name">{{ v.nickname }}</view>
								<view class="score">
									<uni-rate :size="14" :value="v.score" disabled color="#CCCCCC"
										disabled-color="#F17816" />
								</view>
							</view>
						</view>
						<view class="time">{{ v.createTime }}</view>
					</view>
					<view class="comment_content">
						<view class="comment_text">{{ v.comment }}</view>
						<view class="imgs" v-if="v.pics.length!=0">
							<block v-for="(img,index) in v.pics" :key="index">
								<image :src="img" mode="aspectFill" @tap="previewImg(v.pics,index)"></image>
							</block>
						</view>
					</view>
				</view>
			</block>
			<view style="text-align: center;" v-if="!commentList || !commentList.length">
				<image style="width: 200rpx;height: 200rpx;" src="../../../static/nodata.png"></image>
				<view style="color: #999;text-align: center;">暂无评论</view>
			</view>
			<view style="text-align: center;color: #999;margin-bottom: 50rpx;font-size: 24rpx;"
				v-if="noMoreData&&commentList.length!=0">
				没有更多啦
			</view>
		</view>
		<view class="evaluateTalk"  v-if="currentTabs==2 && type==6">
			<view class="talk">
				<view class="talk_t">
					<view class="author">
						<image :src="commentDetail.avatar" mode="aspectFill" style="background-color: #F7F7F7;" />
						<view class="">
							<view class="author_name">{{ commentDetail.realName || '佚名' }}</view>
							<view class="time">{{ commentDetail.createTime }}</view>
						</view>
					</view>
				</view>
				<view class="talk_b">
					<!-- <view class="article_text"></view> -->
					<view class="article_text" v-html="commentDetail.content">
						<!-- {{details.content}} -->
					</view>
					<view class="article_imgs">
						<block v-for="(img,i) in commentImgs" :key="i">
							<image :src="img" mode="aspectFill" @tap="previewImg(i,commentImgs)" />
						</block>
					</view>
				</view>
			</view>
			<view class="comment_list">
				<view class="title">全部评论</view>
				<view class="list">
					<block v-for="(item,index) in commentList" :key="index">
						<view class="item">
							<view class="avatar">
								<image :src="item.avatar" mode="aspectFill" style="background-color: #F7F7F7;" />
							</view>
							<view class="comment_info">
								<view class="comment_top">
									<view class="">
										<view class="user_name">{{item.nickname || '佚名'}}</view>
										<view class="time">{{item.createTime}}</view>
									</view>
									<view class="likes" @click="onReply(item)">
										<image src="/static/forum/pinglun.png" mode=""></image>
										<text>回复</text>
									</view>
								</view>
								<view class="comment_text">
									{{item.content}}
								</view>
								<view class="sub_comment_list" v-if="item.replyList.length>0">
									<view class="">
										<block v-for="(v,i) in item.replyList.length<=2?item.replyList:item.replyList.slice(0,2)"
											:key="i">
											<view class="sub_comment_item">
												<text class="user_name">{{v.nickname}}：</text>
												<text>{{v.content}}</text>
											</view>
										</block>
									</view>
									<view class="" v-if="item.replyList.length>2&&item.isOpen">
										<block v-for="(v,i) in item.replyList.slice(2)" :key="i">
											<view class="sub_comment_item">
												<text class="user_name">{{v.nickname}}：</text>
												<text>{{v.content}}</text>
											</view>
										</block>
									</view>
				
									<view class="total_count" v-if="item.replyList.length>2&&!item.isOpen"
										@tap="openComment(item,index)">
										<text>共{{item.replyList.length}}条回复</text>
										<uni-icons type="right" color="#B3B3B3" size="12"></uni-icons>
									</view>
								</view>
							</view>
				
						</view>
					</block>
					<view style="text-align: center;" v-if="!commentList || !commentList.length">
						<image style="width: 200rpx;height: 200rpx;" src="../../../static/nodata.png"></image>
						<view style="color: #999;text-align: center;">暂无评论</view>
					</view>
					<view style="text-align: center;color: #999;margin-bottom: 50rpx;font-size: 24rpx;"
						v-if="noMoreData&&commentList.length!=0">
						没有更多啦
					</view>
				</view>
			</view>
			<view class="send_box" :style="'bottom:'+keyboardHeight+'rpx;'">
				<view class="input_box">
					<textarea :adjust-position="false" :style="'height:'+textareaHeight+'rpx;'"
					v-model="content" @input="inputMsg" :placeholder="hintText" placeholder-style="font-size:24rpx"
					></textarea>
					<view class="msg_text">{{content}}</view>
				</view>
				<view class="send_btn" @click="onCommit">发送</view>
			</view>
			
		</view>
		<view style="height: 160rpx;"></view>
		
		<uni-popup ref="share" type="bottom">
			<view class="share-pop">
				<view class="share-box around a-c">
					<button class="share-item column a-c" @click="showModal">
						<image src="/static/haibao.png" mode="aspectFill"  />
						<view class="">生成海报</view>
					</button>
					<button class="share-item column a-c" open-type="share">
						<image src="/static/weichat.png" mode="aspectFill"  />
						<view class="">分享好友</view>
					</button>
				</view>
				<view class="t-c close-btn" @click="close('share')">取消</view>
			</view>
		</uni-popup>
		
		<view class="cu-modal" :class="modalName == 'Image' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog" v-if="detail && qrpath && haibaoShow" >
				<view class="bg-img">
					<!-- 自定义生成海报组件 -->
					<!-- @success：成功事件 imgSrc：图片地址（微信小程序必须白名单iP） QrSrc：二维码图片地址  Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
					<cc-poster @success="posterSuccess" :imgSrc="detail.image" :QrSrc="qrpath"
						:Title="detail.storeName" :PriceTxt="detail.price" :OriginalTxt="detail.otPrice"
						:LineType="true" @savebtn.stop="saveBtn"></cc-poster>
				</view>
			</view>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup_box">
				<view class="box_1">
					<image class="cover_img" :src="detail.image" mode="aspectFill"></image>
					<view class="">
						<view class="activity_title">{{ detail.storeName || '' }}</view>
						<view class="price">
							<text>￥</text>
							<text class="price_val">{{ detail.price || 0}}</text>
						</view>
					</view>
					<uni-icons type="closeempty" size="20" @click="close('popup')"></uni-icons>
				</view>
				<view class="box_2" v-for="(item,index) in attrList" :key="index">
					<view class="spec_title">{{ item.attrName }}</view>
					<view class="spec_list">
						<block v-for="(v,i) in item.list" :key="i">
							<!-- 'select_spec':currentSpec==v.id -->
							<view class="spec_item" :class="v.flag?'select_spec': ''" @tap="checkAttr(index,i)">
								{{ v.name }}
							</view>
						</block>
					</view>
				</view>
				<view class="confirm_btn" @tap="toApply">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noMoreData: false,
				activeType: '',
				list: [],
				currentSwiper: 1,
				tabs: [{
					name: '赛事介绍',
					val: 1
				}, {
					name: '参赛人员',
					val: 2
				}, ],
				currentTabs: 1,
				strings: '',
				currentSpec: 1,
				id: '',
				detail: null,
				commentList: [],
				contestants: [],
				applyData: {
					attValueId: 0,
					preOrderType: 0,
					storeProductId: 0
				},
				attrList: [],
				attrVal: null,
				attrSelectObj: null,
				commentData: {
					id: '',
					limit: 10,
					page: 1,
					search: '',
				},
				commentTotal: 1,
				page: 1,
				qrpath: '',
				haibaoImg: null,
				modalName: '',
				haibaoShow: false,
				type: '',
				keyboardHeight: 0,
				textareaHeight: 74,
				commentDetail: null,
				commentImgs: [],
				content: '',
				commentMsg: {
					replyId: '', //回复id
					reviewId: '', //评论父id
					parentId: '', //评论id
					noteId: ''
				},
				hintText: '这里还缺一条你的优质评论',
			};
		},
		onLoad(e) {
			if (e.id === undefined || e.id === 'undefined') return uni.showToast({
				icon: 'none',
				title: '缺少参数无法查看赛事详情',
				complete: () => {
					setTimeout(v => {
						uni.navigateBack();
					}, 2500)
				}
			})
			if (e.type == 6) {
				this.type = 6;
				this.tabs = [{
					name: '产品介绍',
					val: 1
				}, {
					name: '课程评价',
					val: 2
				}];
				uni.onKeyboardHeightChange(res => {
					const {
						windowWidth,
						windowHeight
					} = uni.getSystemInfoSync()
					this.keyboardHeight = Math.round(res.height * (750 / windowWidth))
				})
			}
			this.id = parseInt(e.id);
			this.commentData.id = this.id;
			this.getDetail();
			this.getCommentList();
			this.getImg();
		},
		onReachBottom() {
			if ((this.commentTotal > this.commentData.page) && this.type != 6) {
				this.commentData.page += 1
				this.getCommentList()
			} else if((this.commentTotal > this.page) && this.type == 6) {
				this.page += 1;
				this.getCommentList()
			} else {
				this.noMoreData = true
			}
		},
		onShareAppMessage() {
			var shareObj = {
				title: this.detail.storeName || '',
				imageUrl: this.detail.image || '',
				path: `/pages/index/gameDetail/gameDetail?id=${this.id}`
			}
			return shareObj
		},
		methods: {
			onReply(item) {
				this.content = ''
				this.hintText = `回复: ${item.nickname || '佚名'}`
				this.commentMsg = {
					parentUid: item.uid,
					reviewId: item.id, //评论父id 
					parentId: item.id, //如果多级评论能拿到
				}
			},
			async onCommit() {// 发布评论
				if (!this.content) {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					})
					return false;
				} else {
					this.postComment()
				}
			},
			async postComment() {// 发表评论
				const res = await this.$api.post(`community/note/reply/add`, {
					...this.commentMsg,
					content: this.content,
					type: 1,
					noteId: this.id
				});
				console.log(res, "回复评论")
				if (res.code == 200) {
					uni.showToast({
						title: '发送成功，审核后即可展示~',
						icon: 'none'
					})
					this.page = 1
					this.noMoreData = false
					this.hintText = '这里还缺一条你的优质评论',
					this.content = ''
					this.commentMsg = {}
					// setTimeout(() => {
					// 	this.getCommentList()
					// }, 500)
				}
			},
			inputMsg() {
				var timer = setTimeout(() => {
					this.$nextTick(() => {
						uni.createSelectorQuery().select('.msg_text').boundingClientRect(res => {
							this.textareaHeight = Math.round(res.height * (750 / res.width));
						}).exec();
					})
					clearTimeout(timer)
				}, 500)
			},
			async getImg() {// 0首页 1研学 2冬夏令营 3红领巾 4托管 5心理测评 6小程序码
				const res = await this.$api.get(`image/get/6`);
				console.log(res, "小程序码")
				if (res.code == 200) {
					this.qrpath = res.data.bastBanner[0].pic;
				}
			},
			swiperChange(e) {
				this.currentSwiper = e.detail.current + 1;
			},
			clickTabs(item) {
				this.currentTabs = item.val;
				if (item.val == 2) {
					if(this.type ==6) {
						this.getCommentDetail();
					}else {
						this.getContestants();
					}
					
				}
			},
			previewImg(urls, current) {
				uni.previewImage({
					current,
					urls
				})
			},
			async getDetail() {
				const res = await this.$api.get(`product/detail/${this.id}`);
				if (res.code == 200) {
					var data = res.data.productInfo;
					var sliderImage = JSON.parse(data.sliderImage);
					// console.log('sliderImage',sliderImage)
					this.list = sliderImage;
					this.detail = data;
					if(res.data.activityStatus != 2) {
						this.activeType = res.data.applyStatus;
					}else {
						this.activeType = 2;
					}
					this.attrVal = res.data.productValue;
					var listItem = [];
					res.data.productAttr.forEach(v => {
						var list = v.attrValues.split(',') || [];
						var info = {
							attrName: v.attrName,
							list: []
						}
						list.forEach(name => {
							var obj = {
								name,
								flag: false,
							}
							info.list.push(obj);
						})
						listItem.push(info)
					});
					this.attrList = listItem;
					if(data.content) {
						data.content = data.content.replace(/wscnph/g, 'wscnph maxImg');
						data.content.replace(/<img/g,'<img style="max-width:100% !important;height:auto;" ');
						this.strings = data.content;
					}
					// this.commentList = res.data.productReplyResponses || [];
				}else {
					uni.showToast({
						icon: 'none',
						title: res.message,
						complete: () => {
							setTimeout(v => {
								uni.navigateBack();
							}, 2500)
						}
					})
				}
			},
			async getContestants() {
				const res = await this.$api.get(`competition/people/${this.id}`, {
					id: this.id
				});
				if (res.code == 200) {
					this.contestants = res.data;
				}
			},
			async toApply() {
				if (!this.attrSelectObj) {
					return uni.showToast({
						title: '请选择商品规格',
						icon: 'error'
					})
				}
				this.applyData.attValueId = this.attrSelectObj.id;
				this.applyData.storeProductId = this.id;
				const res = await this.$api.post('order/pre/order', this.applyData);
				if (res.code == 200) {
					this.$to(`/pages/index/joinGame/joinGame?preOrderNo=${res.data.preOrderNo}`);
					this.close('popup');
				} else {
					uni.showToast({
						title: res.message,
						icon: 'error'
					})
					// this.showToast()
				}
			},
			open(n) {
				// 0-未开始 1-进行中 2-已结束
				if (this.activeType == 1) {
					this.$refs[n].open();
				} else if (this.activeType == 0) {
					uni.showToast({
						title: '报名暂未开始~',
						icon: 'none'
					})
					// this.showToast('报名暂未开始~')
				} else {
					uni.showToast({
						title: '报名活动时间已结束~',
						icon: 'none'
					})
					// this.showToast('报名活动时间已结束~')
				}
			},
			openShare() {
				this.$refs.share.open();
			},
			close(n) {
				this.$refs[n].close();
			},
			checkAttr(i, i2) {
				this.attrList[i].list.forEach((v, index) => {
					if (index == i2) {
						v.flag = true;
					} else {
						v.flag = false;
					}
				});
				this.attrSelect();
			},
			attrSelect() {
				var name = '',
					str = '';
				this.attrList.forEach(v => {
					v.list.forEach(item => {
						if (item.flag) {
							if (!name) {
								name = '"' + v.attrName + '":"' + item.name + '"';
								str = item.name;
							} else {
								name = name + ',"' + v.attrName + '":"' + item.name + '"';
								str = str + ',' + item.name;
							}
						}
					})
				});
				this.attrSelectObj = this.attrVal[str];
			},
			async getCommentList() {
				if(this.type == 6) {
					const res = await this.$api.get(`community/note/reply/list/${this.id}/1`, {
						limit: 10,
						page: this.page,
					});
					if (res.code == 200) {
						if (this.page == 1) {
							this.commentTotal = res.data.totalPage;
							this.commentList = res.data.list || [];
						} else {
							this.commentList.push(...res.data.list);
						}
					}
				}else {
					const res = await this.$api.get(`reply/list/${this.id}`, this.commentData);
					if (res.code == 200) {
						if (this.commentData.page == 1) {
							this.commentTotal = res.data.totalPage;
							this.commentList = res.data.list || [];
						} else {
							this.commentList.push(...res.data.list);
						}
					}
				}
			},
			async getCommentDetail() {
				const res = await this.$api.get('ebTrusteeshipCourse/evaluation', {
					id: this.id,
					type: 1
				});
				if (res.code == 200) {
					this.page = 1;
					console.log(res);
					this.commentDetail = res.data;
					if(res.data.image) {
						this.commentImgs = res.data.image.split(',');
					}
					this.getCommentList()
				}
			},
			saveBtn(url) {
				// console.log(url);
				uni.getImageInfo({
					src: url,
					success: (image) => {
						// console.log('图片信息：', JSON.stringify(image));
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: () => {
								this.hideModal();
								uni.showToast({
									title: '海报已保存相册',
									icon: 'success',
									duration: 2000
								});
							}
						});
					}
				});
			},
			posterSuccess(haibaoImg) {
				this.haibaoImg = haibaoImg;
				this.modalName = 'Image';
			},
			showModal() {
				this.$nextTick(() => {
					if (!this.haibaoImg) {
						console.log('走了。。。');
						this.haibaoShow = true;
						uni.showLoading({
							title: '海报生成中...'
						});
					} else {
						this.modalName = 'Image';
					}
					this.close('share')
				})
			},
			hideModal() {
				this.modalName = null;
			},
			// TODO
			async getHaibao() {
				const res = await this.$api.get(`/product/share/${this.id}`);
				console.log(res);
			}
		}
	}
</script>

<style lang="scss">
	p {
		text-indent: 2em;
	}
	[alt] {
		max-width: 100%;
	}

	.maxImg {
		max-width: 100% !important;
		height: auto;
	}
	button {
		background-color: #FFF;
		margin: 0;
		padding: 0;
		text-align: center;
		align-items: center;
		font-size: 20rpx;
		// margin-top: 20rpx;
		// margin-right: 40rpx;
		padding: 10rpx 40rpx 0 10rpx;
		line-height: 1;
	}
	button::after {
		border: none;
	}
	.icon-40 {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 10rpx;
	}
	.gameDetail {
		padding-bottom: 120rpx;

		.nav_bar {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;

			/deep/.uni-navbar {
				// opacity: 0;
				.uni-navbar__content {
					background-color: transparent !important;

					.uni-navbar__header {
						background-color: transparent !important;
					}
				}
			}

			.back_btn {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.detail_t {
			width: 100%;
			height: 728rpx;
			position: relative;
			border-bottom: 14rpx solid #F7F7F7;

			.banner {
				position: relative;

				.swiper {
					width: 100%;
					height: 608rpx;
					background-color: rgba(0, 0, 0, 0.1);

					.swiper-item {
						image {
							width: 100%;
							height: 608rpx;
						}
					}
				}

				.custom-dots {
					width: 66rpx;
					height: 34rpx;
					border-radius: 17rpx;
					line-height: 34rpx;
					text-align: center;
					background-color: rgba(0, 0, 0, 0.4);
					color: #fff;
					font-size: 24rpx;
					position: absolute;
					right: 26rpx;
					bottom: 80rpx;
					z-index: 9;
				}
			}

			.game_info {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 9;
				display: flex;
				align-items: flex-end;



				.game_base_info {
					width: 100%;
					height: 182rpx;
					border-radius: 60rpx 60rpx 0 0;
					background-color: #fff;
					padding: 30rpx 28rpx 0;
					box-sizing: border-box;
					position: relative;
					.info_1 {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.game_title {
							font-size: 32rpx;
							font-weight: bold;
							line-height: 32rpx;
						}

						.price {
							font-size: 24rpx;
							font-weight: bold;
							color: #FF0404;

							.price_val {
								font-size: 40rpx;
							}
						}
					}

					.info_2,
					.info_3 {
						font-size: 24rpx;
						color: #999999;
						display: flex;
						align-items: center;
						line-height: 24rpx;
					}

					.info_2 {
						padding: 22rpx 0 12rpx;
						

						.item-mr60 {
							margin-right: 60rpx;
						}
						
					}
					
				}
			}
		}
		
		.share-btn {
			z-index: 999;
			position: absolute;
			bottom: 30rpx;
			right: 0;
			background-color: #F7F7F7;
			border-radius: 50rpx 0 0 50rpx;
			width: 140rpx;
			padding: 10rpx 0;
			justify-content: center;
			font-size: 24rpx;
			.share-icon {
				width: 34rpx;
				height: 34rpx;
				margin-right: 16rpx;
			}
		}

		.game_other_info {

			.game_desc {
				.introduction {
					border-bottom: 14rpx solid #F7F7F7;
					padding: 0 26rpx 24rpx;
					box-sizing: border-box;
				}
			}

			.participants {
				padding: 40rpx 26rpx 0;
				box-sizing: border-box;

				.item {
					display: flex;
					align-items: center;
					margin-bottom: 50rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}

					.participant_name {
						flex: 1;
						font-size: 26rpx;
						font-weight: bold;
						margin: 0 34rpx;
					}

					.count {
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
		
		.detail_introduction {
			.title {
				padding: 34rpx 27rpx 26rpx;
				box-sizing: border-box;
				font-size: 34rpx;
				font-weight: bold;
			}
			.introduction {
				border-bottom: 14rpx solid #F7F7F7;
				padding: 0 26rpx 24rpx;
				box-sizing: border-box;
			}
		}
		
		.tabs {
			display: flex;
			justify-content: space-between;
			padding: 34rpx 130rpx 14rpx;
			box-sizing: border-box;
		
			.tab_item {
				display: flex;
				flex-direction: column;
				align-items: center;
		
				.tab_name {
					font-size: 26rpx;
				}
		
				.active_name {
					font-weight: bold;
					font-size: 32rpx;
					color: #2E80FE;
				}
		
				image {
					width: 36rpx;
					height: 14rpx;
					opacity: 0;
				}
		
				.active_line {
					opacity: 1;
				}
			}
		}
		
		.comment_list {
			padding: 0 26rpx;
			box-sizing: border-box;
		
			.comment_title {
				padding: 34rpx 0 26rpx;
				box-sizing: border-box;
				font-size: 34rpx;
				font-weight: bold;
			}
		
			.comment_item {
				padding: 24rpx 0 40rpx;
		
				.item_head {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					margin-bottom: 30rpx;
		
					.user_info {
						display: flex;
						align-items: center;
						color: #2E80FE;
		
						image {
							width: 66rpx;
							height: 66rpx;
							border-radius: 50%;
							margin-right: 12rpx;
						}
		
						>view {
							height: 66rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
		
							.user_name {
								font-size: 26rpx;
								color: #2E80FE;
							}
						}
					}
		
					.time {
						font-size: 26rpx;
						color: #B3B3B3;
					}
				}
			}
		
			.comment_content {
				.comment_text {
					font-size: 26rpx;
					margin-bottom: 24rpx;
				}
		
				.imgs {
					display: flex;
					align-items: center;
		
					image {
						width: 226rpx;
						height: 194rpx;
						border-radius: 14rpx;
					}
		
					image:not(:last-child) {
						margin-right: 10rpx;
					}
				}
			}
		}
		
		.evaluateTalk {
			.talk {
				padding: 26rpx 40rpx 40rpx;
				box-sizing: border-box;
				border-radius: 20rpx;
				background-color: #fff;
				border-bottom: 20rpx solid #F7F7F7;
		
				.talk_t {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
		
					.author {
						display: flex;
						align-items: center;
		
						image {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							margin-right: 14rpx;
						}
		
						.author_name {
							font-size: 30rpx;
							line-height: 30rpx;
							font-weight: bold;
							margin-bottom: 14rpx;
						}
		
						.time {
							font-size: 24rpx;
							line-height: 24rpx;
							color: #B3B3B3;
						}
					}
				}
		
				.talk_b {
					.article_text {
						font-size: 26rpx;
						line-height: 40rpx;
						margin-bottom: 16rpx;
					}
		
					.article_imgs {
						image {
							width: 206rpx;
							height: 200rpx;
							border-radius: 20rpx;
						}
		
						image:not(:last-child) {
							margin-right: 12rpx;
						}
					}
				}
			}
		
			.comment_list {
				padding: 40rpx 40rpx 120rpx;
				box-sizing: border-box;
		
				.title {
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 48rpx;
				}
		
				.list {
					.item {
						display: flex;
						justify-content: space-between;
						margin-bottom: 60rpx;
		
						.avatar {
							image {
								width: 66rpx;
								height: 66rpx;
								border-radius: 50%;
							}
						}
		
						.comment_info {
							flex: 1;
							margin-left: 20rpx;
		
							.comment_top {
								display: flex;
								justify-content: space-between;
		
								.user_name {
									font-size: 26rpx;
									line-height: 30rpx;
								}
		
								.time {
									font-size: 20rpx;
									line-height: 20rpx;
									color: #B3B3B3;
									padding: 10rpx 0;
								}
		
								.likes {
									padding-top: 34rpx;
									display: flex;
									align-items: center;
									image {
										width: 34rpx;
										height: 32rpx;
									}
									>text {
										font-size: 24rpx;
										line-height: 24rpx;
										margin-left: 10rpx;
									}
								}
							}
		
		
		
							.comment_text {
								font-size: 26rpx;
								line-height: 32rpx;
							}
						}
		
		
					}
				}
			}
		
			.send_box {
				width: 100%;
				padding: 20rpx 26rpx 40rpx;
				box-sizing: border-box;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 5;
		
				.input_box {
					width: 534rpx;
					min-height: 74rpx;
					position: relative;
					background-color: #F5F5F5;
					border-radius: 14rpx;
		
					textarea {
						width: 534rpx;
						min-height: 74rpx;
						padding: 16rpx 20rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						line-height: 30rpx;
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						z-index: 9;
					}
		
					.msg_text {
						width: 534rpx;
						min-height: 74rpx;
						padding: 16rpx 20rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						line-height: 30rpx;
						opacity: 0;
					}
				}
		
				.send_btn {
					width: 130rpx;
					height: 74rpx;
					border-radius: 14rpx;
					text-align: center;
					line-height: 74rpx;
					background-color: #2E80FE;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
		
		.buy_btn {
			padding: 0 26rpx 28rpx;
			box-sizing: border-box;
			background-color: #fff;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;

			.btn {
				flex: 1;
				height: 92rpx;
				border-radius: 20rpx;
				background-color: #2E80FE;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				line-height: 92rpx;
				color: #fff;
			}

			.disable_joinGray {
				opacity: 0.3;
			}
		}

		.popup_box {
			padding: 46rpx 26rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.box_1 {
				display: flex;
				justify-content: space-between;
				margin-bottom: 66rpx;

				.cover_img {
					width: 146rpx;
					height: 146rpx;
					border-radius: 14rpx;
				}

				>view {
					height: 146rpx;
					flex: 1;
					margin: 0 34rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.game_title {
						font-size: 30rpx;
						font-weight: bold;
						line-height: 30rpx;
					}

					.price {
						font-size: 22rpx;
						font-weight: bold;
						color: #FF0404;

						.price_val {
							font-size: 32rpx;
						}
					}
				}
			}

			.box_2 {
				margin-bottom: 30rpx;

				.spec_title {
					font-size: 26rpx;
					font-weight: bold;
					margin-bottom: 22rpx;
				}

				.spec_list {
					display: flex;
					flex-wrap: wrap;

					.spec_item {
						padding: 0 30rpx;
						height: 46rpx;
						background-color: #F0F0F0;
						font-size: 24rpx;
						color: #999999;
						text-align: center;
						line-height: 46rpx;
						border-radius: 6rpx;
						margin-bottom: 30rpx;
					}

					.spec_item:nth-child(n+1) {
						margin-right: 54rpx;
					}

					.select_spec {
						background-color: #EDF4FF;
						color: #2E80FE;
					}
				}
			}

			.confirm_btn {
				width: 100%;
				height: 92rpx;
				border-radius: 20rpx;
				background-color: #2E80FE;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				line-height: 92rpx;
				color: #fff;
			}
		}
	
		.share-pop {
			background-color: #fff;
			padding-top: 40rpx;
			.share-box {
				font-size: 24rpx;
				text-align: center;
				padding: 14rpx 0;
				padding-bottom: 40rpx;
				button:after {
					border: none;
				}
				image {
					width: 80rpx;
					height: 80rpx;
				}
				.share-item {
					padding: 0;
					background-color: #FFF;
					font-size: 24rpx;
				}
			}
			.close-btn {
				line-height: 3.5;
				border-top: 14rpx solid #F7F7F7;
			}
		}
	
		.cu-modal {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 1110;
			opacity: 0;
			outline: 0;
			text-align: center;
			-ms-transform: scale(1.185);
			transform: scale(1.185);
			backface-visibility: hidden;
			perspective: 2000upx;
			background: rgba(0, 0, 0, 0.6);
			transition: all 0.3s ease-in-out 0s;
			pointer-events: none;
		}
		
		.cu-modal::before {
			content: "\200B";
			display: inline-block;
			height: 100%;
			vertical-align: middle;
		}
		
		.cu-modal.show {
			opacity: 1;
			transition-duration: 0.3s;
			-ms-transform: scale(1);
			transform: scale(1);
			overflow-x: hidden;
			overflow-y: auto;
			pointer-events: auto;
		}
		
		.cu-dialog {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			margin-left: auto;
			margin-right: auto;
			width: 680upx;
			max-width: 100%;
			background-color: #f8f8f8;
			border-radius: 10upx;
			// overflow: hidden;
		}
	}
</style>